/**
 * Created by Administrator on 2016/10/11.
 */

//获取必要的元素
var runData = {
    go:document.getElementById('go'),//向指定方向前进
    left:document.getElementById('left'),//转向左面
    right:document.getElementById('right'),//转向右面
    top:document.getElementById('top'),//转向上面
    bottom:document.getElementById('bottom'),//转向下面
    run_div:document.getElementsByClassName('run_div')[0],
    red_div:document.getElementsByClassName('red_div')[0],
    td:document.getElementsByTagName('td'),
    car:document.getElementsByClassName('car')[0]
};
//alert(funData.red_div.offsetWidth)
function addEvent(ele,eventName,listener){
    if(ele.addEventListener){
        ele.addEventListener(eventName,listener,false);
    }else if(ele.attachEvent){
        ele.attachEvent('on'+eventName,listener);
    }else{
        ele['on'+eventName] = listener;
    }
}


function runDiv(funData){
    this.direction = 'north';
    this.runData = funData;
}

runDiv.prototype={



    turnDirection:function(direction){
      switch(direction){
          case 'left':
//              alert/('left');
              this.runData.run_div.style.transform = 'rotate(-90deg)';
              this.direction = 'west';
              break;
          case 'right':
//              alert('right');
              this.runData.run_div.style.transform = 'rotate(-270deg)';
              this.direction = 'east';
              break;
          case 'top':
//              alert('top')
              this.runData.run_div.style.transform = 'rotate(0deg)';
              this.direction = 'north';
              break;
          case 'bottom':
//              alert('b/ottom');
              this.runData.run_div.style.transform = 'rotate(-180deg)';
              this.direction = 'south';
              break;
      }
        this.go();
    },
    go:function(){
//
        switch (this.direction){
            case 'north':
                if(this.runData.run_div.offsetTop != 42){
                    this.runData.run_div.style.top = (this.runData.run_div.offsetTop-41) + 'px';
                }
                break;
            case 'south':
                if(this.runData.run_div.offsetTop != 411){
                    this.runData.run_div.style.top = (this.runData.run_div.offsetTop+41) + 'px';
                }
                break;
            case 'west':

                if(this.runData.run_div.offsetLeft != 42){
                    this.runData.run_div.style.left = (this.runData.run_div.offsetLeft-41) + 'px';
                }
                break;
            case 'east':
                if(this.runData.run_div.offsetLeft != 411){
                    this.runData.run_div.style.left = (this.runData.run_div.offsetLeft+41) + 'px';
                }
                break;
        }

    }

};
var myDiv = new runDiv(runData);
addEvent(runData.left,'click',function(){myDiv.turnDirection(this.id)});
addEvent(runData.right,'click',function(){myDiv.turnDirection(this.id)});
addEvent(runData.go,'click',function(){myDiv.go()});
addEvent(runData.top,'click',function(){myDiv.turnDirection(this.id)});
addEvent(runData.bottom,'click',function(){myDiv.turnDirection(this.id)});

